<template>
  <div class="site-plan-board-wrapper">
    <div class="top">
      <div
        class="top-item"
        v-for="(item, index) of topConfig"
        :key="index"
      >
        <div class="top-item-left">
          <div class="top-item-left-name">
            {{ item.name }}
          </div>
          <span class="top-item-left-value"
            ><span class="top-item-left-value-num">{{
              topDetail[item.key] || 0
            }}</span
            >个</span
          >
        </div>
        <img :src="item.icon" />
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-title">项目统计趋势图(年度)</div>
        <div class="bottom-content">
          <echartDiv :options="options1" />
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-title">用地性质</div>
        <div class="bottom-content">
          <echartDiv :options="options2" />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-title">最近一个月项目统计</div>
        <div class="bottom-content">
          <echartDiv :options="options3" />
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-title">供地方式</div>
        <div class="bottom-content">
          <echartDiv :options="options4" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import icon1 from '@/assets/img/gdjgkb-icon1.png'
import icon2 from '@/assets/img/gdjgkb-icon2.png'
import icon3 from '@/assets/img/gdjgkb-icon3.png'
import icon4 from '@/assets/img/gdjgkb-icon4.png'
import echartDiv from '@/components/echart/index'
import { projectStatistics } from '@/api/landPlan'
export default {
  name: '',
  components: {
    echartDiv
  },
  data() {
    return {
      topConfig: [
        {
          name: '项目总数',
          key: 'projectTotal',
          icon: icon1
        },
        {
          name: '已完成项目',
          key: 'finishTotal',
          icon: icon2
        },
        {
          name: '执行中项目',
          key: 'executeTotal',
          icon: icon3
        },
        {
          name: '待启动项目',
          key: 'prepareTotal',
          icon: icon4
        }
      ],
      topDetail: {},
      options1: null,
      options2: null,
      options3: null,
      options4: null
    }
  },
  mounted() {
    this.getStatistics()
  },
  methods: {
    getStatistics() {
      projectStatistics().then((res) => {
        if (res.success) {
          this.topDetail = res.data
          this.getChartData1(res.data.yearTotalList)
          this.getChartData2(res.data.landUsageTotal)
          this.getChartData3(res.data.latelyTotalList)
          this.getChartData4(res.data.supportWayTotal)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getChartData1(data) {
      let yData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      data.forEach((item) => {
        const index = parseInt(item.type.split('-')[1])
        yData[index - 1] = item.totalCount
      })
      this.options1 = {
        grid: {
          top: 45,
          bottom: 50,
          left: 65,
          right: 45
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#A7ADB5',
            fontSize: 12
          },
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: {
          name: '单位（个）',
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#A7ADB5',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#497FA333'
            }
          },
          nameTextStyle: {
            color: '#A7ADB5',
            fontSize: 12
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#00BAFF'
            },
            itemStyle: {
              color: '#00BAFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#00BAFF'
                  },
                  {
                    offset: 1,
                    color: '#ffffff'
                  }
                ]
              )
            }
          }
        ]
      }
    },
    getChartData2(data) {
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          icon: 'circle',
          left: 'center',
          top: '10%',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          textStyle: {
            color: '#4C565C',
            fontSize: 14
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['47%', '55%'],
            center: ['50%', '60%'],
            hoverAnimation: false,
            z: 10,
            data: [
              {
                value: 0,
                name: '住宅用地',
                itemStyle: {
                  color: '#80C8FE'
                }
              },
              {
                value: 0,
                name: '商业用地',
                itemStyle: {
                  color: '#0190C6'
                }
              },
              {
                value: 0,
                name: '工业用地',
                itemStyle: {
                  color: '#EFD0A4'
                }
              }
            ],
            label: {
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: true
            }
          },
          {
            type: 'pie',
            radius: ['41%', '47%'],
            center: ['50%', '60%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [
              {
                value: 0,
                name: '住宅用地',
                itemStyle: {
                  color: '#80C8FE',
                  opacity: 0.4
                }
              },
              {
                value: 0,
                name: '商业用地',
                itemStyle: {
                  color: '#0190C6',
                  opacity: 0.4
                }
              },
              {
                value: 0,
                name: '工业用地',
                itemStyle: {
                  color: '#EFD0A4',
                  opacity: 0.4
                }
              }
            ],
            labelLine: {
              show: false
            }
          }
        ]
      }
      data.forEach((item) => {
        if (item.type === '住宅用地') {
          option.series[0].data[0].value = item.totalCount
          option.series[1].data[0].value = item.totalCount
        } else if (item.type === '商业用地') {
          option.series[0].data[1].value = item.totalCount
          option.series[1].data[1].value = item.totalCount
        } else if (item.type === '工业用地') {
          option.series[0].data[2].value = item.totalCount
          option.series[1].data[2].value = item.totalCount
        }
      })
      this.options2 = option
    },
    getChartData3(data) {
      let xAxisData = []
      let data1 = []
      let data2 = []
      let data3 = []
      data.forEach((item) => {
        xAxisData.push(item.timeStamp)
        data1.push(item.finishTotal)
        data2.push(item.executeTotal)
        data3.push(item.prepareTotal)
      })

      this.options3 = {
        grid: {
          top: 55,
          bottom: 50,
          left: 65,
          right: 45
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 15,
          right: 45,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#4C565C',
            fontSize: 14
          }
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            }
          }
        ],
        yAxis: [
          {
            name: '单位（个）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '已完成',
            type: 'bar',
            barWidth: 10,
            barGap: '160%',
            emphasis: {
              focus: 'series'
            },
            data: data1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#5AB9F8'
                  },
                  {
                    offset: 0.5,
                    color: '#419EDC'
                  }
                ]
              )
            }
          },
          {
            name: '执行中',
            type: 'bar',
            barWidth: 10,
            barGap: '160%',
            emphasis: {
              focus: 'series'
            },
            data: data2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#4FD7D9'
                  },
                  {
                    offset: 0.5,
                    color: '#00A49E'
                  }
                ]
              )
            }
          },
          {
            name: '待启动',
            type: 'bar',
            barWidth: 10,
            barGap: '160%',
            emphasis: {
              focus: 'series'
            },
            data: data3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#E2A272'
                  },
                  {
                    offset: 0.5,
                    color: '#BC7E60'
                  }
                ]
              )
            }
          }
        ]
      }
    },
    getChartData4(data) {
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          icon: 'circle',
          left: 'center',
          top: '10%',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          textStyle: {
            color: '#4C565C',
            fontSize: 14
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['47%', '55%'],
            center: ['50%', '60%'],
            hoverAnimation: false,
            z: 10,
            data: [
              {
                value: 0,
                name: '协议出让',
                itemStyle: {
                  color: '#22CED6'
                }
              },
              {
                value: 0,
                name: '拍卖',
                itemStyle: {
                  color: '#FB8585'
                }
              },
              {
                value: 0,
                name: '挂牌',
                itemStyle: {
                  color: '#698FEF'
                }
              }
            ],
            label: {
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: true
            }
          },
          {
            type: 'pie',
            radius: ['41%', '47%'],
            center: ['50%', '60%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [
              {
                value: 0,
                name: '协议出让',
                itemStyle: {
                  color: '#22CED6',
                  opacity: 0.4
                }
              },
              {
                value: 0,
                name: '拍卖',
                itemStyle: {
                  color: '#FB8585',
                  opacity: 0.4
                }
              },
              {
                value: 0,
                name: '挂牌',
                itemStyle: {
                  color: '#698FEF',
                  opacity: 0.4
                }
              }
            ],
            labelLine: {
              show: false
            }
          }
        ]
      }
      data.forEach((item) => {
        if (item.type === '协议出让') {
          option.series[0].data[0].value = item.totalCount
          option.series[1].data[0].value = item.totalCount
        } else if (item.type === '拍卖') {
          option.series[0].data[1].value = item.totalCount
          option.series[1].data[1].value = item.totalCount
        } else if (item.type === '挂牌') {
          option.series[0].data[2].value = item.totalCount
          option.series[1].data[2].value = item.totalCount
        }
      })
      this.options4 = option
    }
  }
}
</script>
<style lang="scss">
.wrap {
  box-shadow: none !important;
}
.site-plan-board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff3f9;
  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-item {
      width: calc(25% - 12px);
      height: 108px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 18px 34px;
      &:first-child {
        background-image: url('~@/assets/img/gdjgkb-bg1.png');
      }
      &:nth-child(2) {
        background-image: url('~@/assets/img/gdjgkb-bg2.png');
      }
      &:nth-child(3) {
        background-image: url('~@/assets/img/gdjgkb-bg3.png');
      }
      &:nth-child(4) {
        background-image: url('~@/assets/img/gdjgkb-bg4.png');
      }
      img {
        width: 66px;
        height: 66px;
      }
      &-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        &-name {
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
        }
        &-value {
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
          &-num {
            font-size: 30px;
            font-weight: bold;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: calc(50% - 74px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-left {
      width: calc(75% - 4px);
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }
    &-right {
      width: calc(25% - 12px);
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }
    &-title {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 18px 35px;
      font-size: 16px;
      font-weight: 500;
      color: #4c565c;
      line-height: 16px;
      display: flex;
      align-items: center;
      position: relative;
      &::before {
        position: absolute;
        content: ' ';
        top: 18px;
        left: 24px;
        width: 4px;
        height: 14px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
      }
    }
    &-content {
      width: 100%;
      height: calc(100% - 50px);
    }
  }
}
</style>
